<template>
  <el-upload ref="uploadRef" v-model:file-list="options.fileList" class="upload-demo" :action="props.action"
    :multiple="props.multiple" :limit="props.limit" :before-upload="methods.handleBeforeUpload"
    :on-remove="methods.handleRemove" :on-success="methods.handleSeccess" :on-error="methods.handlError"
    :before-remove="methods.beforeRemove" :on-change="handleOnChange" :on-exceed="handleExceed">
    <template #file="{ file, index }">
      
      <div class="image_warp" v-if="isImage(file.name,file)">
        <el-image style="width: 50px; height:50px" :src="file.response.attachPath" fit="cover"
          :preview-src-list="[file.attachUrl]" />
        <span style="margin-left: 10px;"> {{ file.name }}</span>
        <el-icon class="deletebut" @click="methods.handleRemove">
          <Close />
        </el-icon>
      </div>
      <div v-else>{{ file.name }}</div>
    </template>
    <slot v-if="props.customDom"> </slot>
    <div v-else>
      <el-button type="primary">上传</el-button>
    </div>
  </el-upload>
</template>

<script setup name="FileUpload">
import { setup as fileUpdataSetup } from './fileUpload'

import { ref } from 'vue'
const uploadRef = ref(null)
const { options, methods } = fileUpdataSetup()
const emit = defineEmits(['onChange'])
const handleOnChange = () => {
  emit('onChange', options.fileList)
} 
const isImage = (url,file) => {
  const imageExtensions = ["jpg", "jpeg", "png", "gif", "bmp", "webp",'jfif']
  try {
    const ext = url.split(".").pop().toLowerCase()
    return imageExtensions.includes(ext)
  } catch (error) {
  }
}
const handleExceed = () => {
  // uploadRef.value.clearFiles()
  // const file = options.fileList[0]
  // uploadRef.value.handleStart(file)
}

const props = defineProps({
  limit: {
    type: Number,
    default: 12,
  },
  multiple: {
    type: Boolean,
    default: true,
  },
  action: {
    type: String,
    default: 'http://114.250.31.154:8087/api-osms-sys/attach/upload',
  },
  customDom: Boolean,
})
</script>
<script>
export default {
  name: 'FileUpload'
}
</script>
<style lang="scss">
@import './index.scss';

.el-upload__tip {
  margin: 9 0 0 5px;
  font-size: 12px;
  color: #888;
}
</style>
